<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleCancel" title="选择知识商品" width="700px">
      <div>
        <el-input v-model="keyWord" placeholder="请输入商品名称" style="width:300px;" />
        <el-button icon="el-icon-search">搜索</el-button>
      </div>
      <div class="table-box">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="newTable"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          :row-key="getRowKey"
          tooltip-effect="dark"
          class="textRadio"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column :reserve-selection="true" type="selection" width="55" />
          <el-table-column label="页面名称">
            <template slot-scope="scope">
              <div class="row-box">
                <div class="img-box">
                  <img :src="scope.row.imgUrl" alt />
                </div>
                <div class="list-box">
                  <div class="list-title">{{ scope.row.title }}</div>
                  <div class="list-price">{{ scope.row.price=='0'?'免费':scope.row.price }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin:20px 0;">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="studyArticleList.length"
            background
            layout=" prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyWord: '',
      activeName: '1',
      loading: false,
      multipleSelection: [],
      currentPage: 1,
      pageSize: 5,
      studyArticleList: [
        {
          id: '12',
          imgUrl: '/src/assets/analyze_data/livestreaming.png',
          title: '直播-快速创建直播间',
          status: true,
          tag: '直播',
          price: '0'
        },
        {
          id: '16',
          imgUrl: '/src/assets/analyze_data/livestreaming.png',
          title: '直播-快速创建直播间',
          status: false,
          tag: '直播',
          price: '20'
        },
        {
          id: '15',
          imgUrl: '/src/assets/analyze_data/livestreaming.png',
          title: '直播-快速创建直播间',
          status: true,
          tag: '直播',
          price: '0'
        }],
      // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
      getRowKey(row) {
        return row.id
      },
    }
  },
  computed: {
    newTable() {
      return this.studyArticleList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页设置
    handleCurrentChange(arg) {
      this.currentPage = arg
    },
    handleCancel() {
      this.$emit('cancelClick')
      this.$refs.multipleTable.clearSelection()
      this.multipleSelection = []
    },
    handleConfirm() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请选择商品')
        return
      }
      this.$emit('confirmClick', this.multipleSelection)
      this.$refs.multipleTable.clearSelection()
      this.multipleSelection = []
    }
  }
}
</script>

<style lang="scss" scoped>
.textRadio {
  /deep/.el-radio__label {
    display: none;
  }
  .row-box {
    display: flex;

    .img-box {
      width: 56px;
      height: 42px;
      margin-right: 10px;
      img {
        border-radius: 3zpx;
        width: 100%;
        height: 100%;
      }
    }
    .list-box {
      .list-title {
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 6px;
      }
      .list-price {
        color: #dd2e2e;
      }
    }
  }
}
.table-box {
  margin-top: 20px;
  max-height: 500px;
  overflow: auto;
}
</style>
